<template>
    <div class="container">
        <div class="mindmap">

            <h2>思维导图</h2>
            <p>这里是思维导图的内容展示区域。</p>
        </div>
        <!-- <mindmap class="mindmap" v-model="data" :branch="rangeList['branch'].value" :x-gap="rangeList['x-gap'].value"
            :y-gap="rangeList['y-gap'].value" :zoom="checkboxList['zoom'].value" :fit-btn="checkboxList['fit-btn'].value"
            :center-btn="checkboxList['center-btn'].value" :download-btn="checkboxList['download-btn'].value"
            :drag="checkboxList['drag'].value" :edit="checkboxList['edit'].value"
            :add-node-btn="checkboxList['add-node-btn'].value" :sharp-corner="checkboxList['sharp-corner'].value"
            :ctm="checkboxList['contextmenu'].value" :timetravel="checkboxList['timetravel'].value"
            @update:model-value="onChange" :locale="locale" /> -->
        <div class="divider"></div>
        <div class="input-area">
            <input type="text" placeholder="请输入你的问题..." />
            <button>提问</button>
        </div>
    </div>
    <!-- <h1>hhhhh</h1> -->
</template>

<script lang="ts">
// import hello from '@/hello.json'
// import { defineComponent, reactive, ref } from 'vue'
// import Mindmap from '@/components/Mindmap'
// import type { Locale } from '@/components/Mindmap/interface'

// type checkbox = { [key: string]: { value: boolean, disabled?: boolean } }

// export default defineComponent({
//     name: 'mindmap',
//     components: {
//         Mindmap
//     },
//     setup() {
//         const checkboxList = reactive<checkbox>({
//             'center-btn': { value: true },
//             'fit-btn': { value: true },
//             timetravel: { value: true },
//             'download-btn': { value: true },
//             'add-node-btn': { value: true },
//             keyboard: { value: false, disabled: true },
//             zoom: { value: true },
//             drag: { value: true },
//             edit: { value: true },
//             contextmenu: { value: true },
//             'sharp-corner': { value: false },
//             vertical: { value: false, disabled: true }
//         })
//         const rangeList = reactive({
//             branch: { value: 4, min: 1, max: 6 },
//             'x-gap': { value: 84, min: 0, max: 100 },
//             'y-gap': { value: 18, min: 0, max: 100 }
//         })
//         const data = ref(hello)
//         const onChange = () => console.log('update:model-value')
//         const locale = ref<Locale>('zh')

//         return {
//             data,
//             checkboxList,
//             rangeList,
//             onChange,
//             locale
//         }
//     }
// })

</script>

<style lang="scss">
.container {
    width: 100%;
    height: 98%;
    border-radius: 4px;
    border: thin solid rgba(0, 0, 0, 0.12);
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.12);
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 1px 40px; // 自动高度将适应内容

    .mindmap {
        grid-column: 1 / 3; // 占据左侧的75%区域
        grid-row: 1; // 第一行
        padding: 16px; // 内边距
        background-color: white; // 思维导图背景
        overflow: auto; // 如果内容溢出，允许滚动
    }

    .divider {
        grid-column: 1 / 3; // 占据两列
        grid-row: 2; // 第二行
        background-color: rgba(0, 0, 0, 0.12); // 分隔线背景色
        height: 1px; // 分隔线高度
    }

    .input-area {
        grid-column: 1 / 4; // 占据所有列
        grid-row: 3; // 第三行
        display: flex;
        align-items: center; // 垂直居中
        padding: 16px; // 内边距

        input {
            flex: 1; // 输入框占据剩余空间
            padding: 8px; // 内边距
            border: 1px solid rgba(0, 0, 0, 0.12);
            border-radius: 4px;
            margin-right: 8px; // 右边距
        }

        button {
            padding: 10px 16px; // 内边距
            border: none; // 无边框
            border-radius: 4px;
            background-color: #007bff; // 按钮背景色
            color: white; // 字体颜色
            cursor: pointer; // 鼠标样式

            &:hover {
                background-color: #0056b3; // 悬停效果
            }
        }
    }
}
</style>
